let { $, table,layer,form,upload } = layui;
export default class Add{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <form class="layui-form addForm" lay-filter="addForm" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="uploadBtn">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <img id="headImg" width="80" height="100" />
                        <input type="hidden" name="headImg" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="name"
                            required
                            lay-verify="required"
                            placeholder="请输入姓名"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="age"
                            required
                            lay-verify="required"
                            placeholder="请输入年龄"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择班级</label>
                    <div class="layui-input-block">
                        <select name="cls" >
                           
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                    <input type="radio" name="gender" value="男" title="男">
                    <input type="radio" name="gender" value="女" title="女">
                    </div>
                </div>
            </form>
        `;
        $("#addStudentTemplate").html(template);
    }
    handle(){
        layer.open({
            type: 1, 
            title:"增加学生",
            btn:['确定','取消'],
            success:function(){
                $.ajax({
                    type:"get",
                    url:"/classes/all",
                    success(res){
                        let str = res.data.map((item) => `<option value="${item._id}">${item.name}</option>`)
                                    .join("");
                        $("[name=cls]").html(str);
                        form.render();
                        // 上传头像
                        upload.render({
                            elem:"#uploadBtn",
                            url:"/upload",
                            done(res){
                                console.log("Res",res);
                                $("#headImg").attr("src","/images/"+res.filename);
                                $("[name=headImg]").val(res.filename);
                            }
                        });
                    }
                });
            },
            yes:function(index){
                $.ajax({
                    type:"post",
                    url:"/students",
                    data:form.val("addForm"),
                    success(){
                        table.reload("studentTable",{
                            where:{}
                        });
                        layer.close(index);
                    }
                });
               
            },
            content: $("#addStudentTemplate").html()
        });
    }
}